<template>
	<div class="test_page">
		<!-- <el-form :model="state.queryParams" inline>
			<el-form-item label="时间">
				<el-date-picker
					type="monthrange"
					size="large"
					v-model="state.dateTime"
					:default-time="defaultTime"
					format="YYYY-MM"
					value-format="YYYY-MM-DD HH:mm:ss"
					@change="dateChange"
				>
				</el-date-picker>
			</el-form-item>
			<el-form-item label="订单号">
				<el-input v-model="state.queryParams.orderNo"></el-input>
			</el-form-item>
			<el-form-item label="商品名称">
				<el-input v-model="state.queryParams.orderNo"></el-input>
			</el-form-item>
			<el-form-item label="状态">
				<el-input v-model="state.queryParams.orderNo"></el-input>
			</el-form-item>
		</el-form> -->

		<div>
			输入<el-input v-model="state.ipt" class="ipt"></el-input>
			<p>{{ countUnit }}</p>
		</div>

		<el-table :data="state.tableData" border stripe show-summary :summary-method="getSummary">
			<el-table-column label="下单时间" prop="createdTime" sortable :resizable="false"></el-table-column>
			<el-table-column label="商品编码" prop="skuCode"></el-table-column>
			<el-table-column label="成本价" prop="ownerCostPrice"></el-table-column>
			<el-table-column label="数量" prop="goodsCount"></el-table-column>
			<el-table-column label="合计" prop="totalPrice"></el-table-column>
			<el-table-column label="发货时间" prop="shippingTime"></el-table-column>
			<el-table-column label="操作">
				<template #default="{ row }">
					<el-button text type="primary" @click="handleDetail">设置</el-button>
					<el-button text type="primary" @click="handleUpload">上传</el-button>
					<el-button text type="primary" @click="test">测试</el-button>
				</template>
			</el-table-column>
		</el-table>

		<msg v-model="visible" />
		<upAva ref="UpAvaRef" />
	</div>
</template>

<script setup>
import { reactive, toRef, ref, onMounted, h, computed } from 'vue'
import dayjs from 'dayjs'
import msg from './components/msg.vue'
import upAva from './components/upAva.vue'
import { ElMessage } from 'element-plus'
const state = reactive({
	queryParams: {},
	summary: {},
	tableData: [],
	dateTime: '',
	ipt: '',
	tips: ''
})
const defaultTime = [new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 2, 1, 23, 59, 59)]
const visible = ref(false)
const upVisible = ref(false)
const UpAvaRef = ref()

const dateChange = val => {
	console.log('val', val)
	console.log('state.dateTime', state.dateTime)
}
const countUnit = computed(() => {
	const value = state.ipt
	let num

	// 尝试将输入转换为数字
	if (typeof value === 'string') {
		num = parseFloat(value.replace(/[^0-9.-]/g, '')) // 移除非数字字符
	} else {
		num = value
	}

	// 处理特殊情况
	if (isNaN(num) || num === '') {
		return '' // 返回空字符串表示无效输入
	}

	// 根据数字大小确定单位
	if (num >= 1000 && num < 10000) {
		return '千'
	} else if (num >= 10000 && num < 100000) {
		return '万'
	} else if (num >= 100000 && num < 1000000) {
		return '十万'
	} else if (num >= 1000000 && num < 10000000) {
		return '百万'
	} else {
		return '' // 默认情况下返回空字符串
	}
})
const handleDetail = row => {
	visible.value = true
}
// 获取昀晗数据
const init = async () => {
	const data = await fetch('/src/data/yunhan.json')
	const res = await data.json()
	console.log('res', res.data)
	state.tableData = res.data
	state.summary = res.summary
	let arr = [...res.data]
	let newArr = arr.map(i => ({ ...i, isShow: false }))
	console.log('newArr', newArr)
	newArr.map(i => {
		i.goodsCount > 1
	})
}

const handleUpload = () => {
	UpAvaRef.value.open()
}
const getSummary = param => {
	const { columns, data } = param
	const sums = []
	columns.forEach((column, index) => {
		const { property } = column
		if (index === 0) {
			sums[index] = h('div', { style: { textDecoration: 'underline' } }, ['汇总'])
			return
		} else {
			sums[index] = h('div', { style: { color: '#fa5123' } }, [state.summary[property]])
		}
	})

	return sums
}

const testfn = () => {
	try {
		let num = Math.floor(Math.random() * 10)
		console.log('num', num)
		if (num % 2 === 0) {
			ElMessage.success('偶數')
		}
	} catch (error) {
		ElMessage.error('錯誤', error)
		
	}
}

const debounce = (fn, delay) => {
	let timer
	return function (...args) {
		clearTimeout(timer)
		timer = setTimeout(() => {
			fn.apply(this, args)
		}, delay)
	}
}

const test = debounce(testfn, 2000)

onMounted(() => {
	init()
	// console.log('################');
	// console.log(dayjs(new Date(2000, 1, 2, 0, 0, 0)).format('YYYY-MM-DD HH:mm:ss'));
	// console.log(dayjs(new Date(2000,2,2,23,59,59)).format('YYYY-MM-DD HH:mm:ss'));
	// test()
})
</script>

<style scoped lang='scss'>
.test_page {
	height: calc(100vh - 130px);
	background-color: #fff;
	padding: 10px;
	border-radius: 10px;
	box-shadow: 0 0 12px rgba(0, 0, 0, 0.12);
	border-radius: 5px;

	.el-form-item {
		padding-left: 10px;
		border: 1px solid #ccc;
		:deep(.el-input__wrapper) {
			outline: none !important;
			box-shadow: none !important;
		}
	}
}
</style>
